<template>
  <header class="header">
    <h1>todos</h1>
    <!-- 实现全选功能 -->
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model.trim="task"
      @keydown.enter="addTask"
    />
    <!-- 对键盘enter经行事件监听 -->
  </header>
</template>

<script>

export default {
   props:{
     list:{
       type:Array,
     require:true
   }
   },
   computed:{
     isAll: {
       get() {
         return  this.list.every(item => item.isDone === true)
       },
       set(val) {
        //  console.log(val);
        // 将isDone的值赋值给val 即钩起全选按钮，val值为true此时 isDone的值全为true
           this.list.forEach(item => item.isDone = val)
       }
     }
   },
   data(){
      return {
        // 添加功能，准备一个数据和v-model数据双向绑定
        task:''
      };
   },
   methods: {
     addTask(){
       this.$emit('addTask', this.task);
       this.task=''
     }
   },
}
</script>